"use server";
import { Avatar, Button, Card, Divider, message, Typography } from "antd";
import "./index.css";
import Link from "next/link";
import { getQuestionBankVoByIdUsingGet } from "@/api/questionBankController";
import React from "react";
import Meta from "antd/es/card/Meta";
import Paragraph from "antd/es/typography/Paragraph";
import Title from "antd/es/typography/Title";
import QuestionList from "@/components/QuestionList";

/**
 * 主页
 * @constructor
 */
export default async function BankPage({ params }) {
  let { questionBankId } = params;
  let bank = undefined;

  try {
    const result = await getQuestionBankVoByIdUsingGet({
      id: questionBankId,
      needQueryQuestionList: true,
      pageSize: 12,
    });
    bank = result.data;
  } catch (e) {
    message.error("获取题库列表失败，" + e.message);
  }
  //  错误处理
  if (!bank) {
    return <div>获取题目详情失败，请刷新重试</div>;
  }

  //  获取第一道题目，“开始刷题”使用
  let firstQuestionId;
  if (bank.questionPage?.records?.length > 0 && bank.questionPage?.records) {
    firstQuestionId = bank.questionPage?.records[0].id;
  }
  return (
    <div id="bankPage" className={"max-width-content"}>
      <Card>
        <Meta
          avatar={
            <Avatar
              src={`https://api.dicebear.com/7.x/miniavs/svg?seed=1`}
              size={72}
            />
          }
          title={
            <Title level={3} style={{ marginBottom: 0 }}>
              {bank.title}
            </Title>
          }
          description={
            <>
              <Paragraph
                type="secondary" //  文本类型
              >
                {bank.description}
              </Paragraph>
              <Button
                type={"primary"}
                shape={"round"}
                href={`/bank/${questionBankId}/question/${firstQuestionId}`}
                target={"_blank"}
                disabled={!firstQuestionId}
              >
                开始刷题
              </Button>
            </>
          }
        />
      </Card>
      <Divider />
      <QuestionList
        questionList={bank.questionPage?.records || []}
        cardTitle={`题目列表（${bank.questionPage?.total || 0}）`}
        questionBankId={bank.id}
      ></QuestionList>
    </div>
  );
}
